<script setup lang="ts">
import Header from '@/components/Header/index.vue'
import SearchPart from '@/components/SearchPart/index.vue'
import Footer from '@/components/Footer/index.vue'
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

<template>
  <Header />
  <div class="search-wrapper">
    <SearchPart />
  </div>
  <div class="my-container">
    <div class="my-wrapper">
      <div class="control-entry">
        <div class="control-bar">
          <div class="header">全部功能</div>
          <div class="control-list">
            <div
              :class="[
                'control-item',
                route.path === '/mine/my-cart' ? 'active' : '',
              ]"
            >
              <router-link to="/mine/my-cart">我的购物车</router-link>
            </div>
            <div
              :class="[
                'control-item',
                route.path === '/mine/my-coupon' ? 'active' : '',
              ]"
            >
              <router-link to="/mine/my-coupon">我的优惠券</router-link>
            </div>
            <div
              :class="[
                'control-item',
                route.path === '/mine/my-order' ? 'active' : '',
              ]"
            >
              <router-link to="/mine/my-order">我的订单</router-link>
            </div>
            <div
              :class="[
                'control-item',
                route.path === '/mine/my-address' ? 'active' : '',
              ]"
            >
              <router-link to="/mine/my-address">我的地址</router-link>
            </div>
            <div
              :class="[
                'control-item',
                route.path === '/mine/my-info' ? 'active' : '',
              ]"
            >
              <router-link to="/mine/my-info">我的信息</router-link>
            </div>
            <div
              :class="[
                'control-item',
                route.path === '/mine/my-collect' ? 'active' : '',
              ]"
            >
              <router-link to="/mine/my-collect">我的收藏</router-link>
            </div>
            <div
              :class="[
                'control-item',
                route.path === '/mine/my-comment' ? 'active' : '',
              ]"
            >
              <router-link to="/mine/my-comment">我的评论</router-link>
            </div>
          </div>
        </div>
        <div class="content">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
  <Footer />
</template>

<style lang="less" scoped>
.search-wrapper {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.my-container {
  display: flex;
  padding: 20px 0;
  justify-content: center;
  background-color: #d9d9d9;
}
.my-wrapper {
  width: 1296px;
  border-radius: 10px;
  background-color: #fff;
  box-sizing: border-box;
  // overflow: hidden;
  padding: 20px;
}
.control-entry {
  width: 100%;
  display: flex;
  .header {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    padding: 5px 10px;
    line-height: 30px;
    text-align: center;
    color: #ff5000;
  }
  .control-bar {
    width: 200px;
    border-right: 1px solid #ccc;
    .control-list {
      padding: 0 20px;
    }
    .control-item {
      margin: 10px 0;
      text-align: center;
      a {
        display: block;
        color: #666;
        line-height: 36px;
        text-decoration: none;
      }
      &.active a {
        color: #ff5000;
      }
    }
  }
  .content {
    flex: 1;
    padding: 20px;
  }
}
</style>
